<template>
  <el-dialog title="跟进项详情" :visible.sync="showDetails" width="1000px" class="m-fullContentDialog"
             append-to-body
             :close-on-click-modal="false" :close-on-press-escape="false" @open="getInfo"
             :show-close="false"
             @close="$emit('update:show', false)">
    <div slot="title" class="dialog-title"></div>
    <div class="m-detailTabsCard">
      <el-tabs v-model="activeTab" type="card">
        <el-tab-pane label="跟进项" name="a">
          <div class="m-leadTabFrom">
            <el-form :model="upLoadRowData.form" ref="refUpLoadRowDataForm" :rules="upLoadRowData.rules" label-position="left" label-width="100px">
              <div>
                <el-form-item label="单号" prop="id">
                  <el-input v-model="upLoadRowData.form.id" disabled></el-input>
                </el-form-item>
                <el-form-item label="主题" prop="theme">
                  <el-input v-model="upLoadRowData.form.theme" disabled></el-input>
                </el-form-item>
                <el-form-item label="主题描述" prop="themeDesc">
                  <el-input
                    type="textarea"
                    clearable :disabled="!isEdit"
                    :rows= '5'
                    v-model="upLoadRowData.form.themeDesc">
                  </el-input>
                </el-form-item>
                <el-row :gutter="40">
                  <el-col :span="10">
                    <el-form-item label="名单类型" prop="type">
                      <el-select v-model="upLoadRowData.form.type" placeholder="请选择" disabled>
                        <el-option label="LEAD" :value="2"></el-option>
                        <el-option label="真实账号" :value="1"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="名单" prop="typeId">
                      <el-input v-model="upLoadRowData.form.typeId" disabled></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <el-row :gutter="40">
                <el-col :span="10">
                  <el-form-item label="处理状态" prop="hstatus">
                    <el-select v-model="upLoadRowData.form.hstatus" placeholder="请选择" :clearable="isEdit"
                               :disabled="!isEdit">
                      <el-option label="待处理" :value="1"></el-option>
                      <el-option label="处理中" :value="2"></el-option>
                      <el-option label="已完成" :value="3"></el-option>
                      <el-option label="已取消" :value="4"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="40">
                <el-col :span="10">
                  <el-form-item label="预约时间" prop="resvTimeStr">
                    <el-date-picker
                      v-model="upLoadRowData.form.resvTimeStr"
                      clearable
                      class="inputFullWidth"
                      :disabled="!isEdit || upLoadRowData.form.hstatus =='3' || upLoadRowData.form.hstatus =='4'"
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      type="datetime"
                      :editable="false"
                      :picker-options="pickerOptions"
                      placeholder="请选择">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="预约提醒" prop="resvSndTimeStr">
                    <el-select v-model="upLoadRowData.form.during" placeholder="请选择" :clearable="isEdit"
                               :disabled="!isEdit || upLoadRowData.form.hstatus=='3' || upLoadRowData.form.hstatus=='4' || !upLoadRowData.form.resvTimeStr">
                      <el-option label="5分钟前" value="5"></el-option>
                      <el-option label="10分钟前" value="10"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="40">
                <el-col :span="10">
                  <el-form-item label="分配给" prop="assigner">
                    <el-select
                      :disabled="!isEdit"
                      :clearable="isEdit"
                      v-model="upLoadRowData.form.assigner"
                      filterable
                      remote
                      reserve-keyword
                      :remote-method="remoteUserMethod"
                      placeholder="请输入关键词"
                    >
                      <el-option
                        v-for="item in userList"
                        :label="item._id"
                        :key="item._id"
                        :value="item._id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="40">
                <el-col :span="10">
                  <el-form-item label="标记">
                    <el-select v-model="showLabel" multiple placeholder="请选择" disabled>
                      <el-option v-for="item in showLabel" :label="item" :value="item" :key="item"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="40">
                <el-col :span="10">
                  <el-form-item label="手机号码">
                    <el-input v-model="phoneNum" placeholder="请输入内容" readonly ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10" class="callBtn">
                  <el-form-item>
                        <el-button type="primary" @click="getCallChannels">拨号</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="activeBtns" v-if="isEdit">
              </div>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="跟进详情" name="b">
          <div class="m-LeadTabTable">
            <div class="m-searchListPanel">
              <div class="layout-1"><span class="leftLine"></span>信息列表</div>
              <div class="layout-2" v-if="isEdit">
                <el-button type="text" icon="el-icon-plus" @click="addRowData.show = true">新建</el-button>
              </div>
            </div>
            <div class="m-dataList">
              <el-table
                :data="dataList"
                style="width: 100%"
                :max-height="600"
              >
                <el-table-column
                  prop="followDetail"
                  width="200"
                  label="跟进情况">
                </el-table-column>
                <el-table-column
                  prop="followDetailDesc"
                  min-width="438"
                  label="跟进描述">
                </el-table-column>
                <el-table-column
                  prop="createUser"
                  label="创建人"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="createTime"
                  label="创建时间"
                  width="160">
                </el-table-column>
              </el-table>
            </div>
            <div class="m-pagination">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes=pagination.pageSizeList
                :current-page=pagination.pageNo
                :page-size=pagination.pageSize
                layout="total, sizes, prev, pager, next"
                :total=pagination.total>
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <el-dialog append-to-body title="创建跟进项" :visible.sync="addRowData.show" width="400px" class="m-dialog"
                 :close-on-click-modal="false" :close-on-press-escape="false" @close="clearAddDialog">
        <el-form :model="addRowData.form" ref="refddRowDataForm" :rules="addRowData.rules" label-position="left" label-width="80px">
          <el-form-item label="跟进情况" prop="followDetail">
            <el-input v-model="addRowData.form.followDetail" clearable></el-input>
          </el-form-item>
          <el-form-item label="跟进描述" prop="followDetailDesc" class="last">
            <el-input type="textarea" v-model="addRowData.form.followDetailDesc" :rows="3"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addRowData.show = false">取消</el-button>
          <el-button type="primary" @click="addRowDataSubmit">提交</el-button>
        </div>
      </el-dialog>
        <el-dialog
            append-to-body
            title="选择拨打线路"
            :visible.sync="isChannelShow"
            width="400px">
            <div class="content">
                <el-radio v-model="teleChannel" label="1">线路1</el-radio>
                <el-radio v-model="teleChannel" label="2">线路2</el-radio>
                <el-radio v-model="teleChannel" label="3">线路3</el-radio>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="isChannelShow = false">取 消</el-button>
                <el-button type="primary" @click="callIpPhone">拨 打</el-button>
            </span>
        </el-dialog>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="showDetails=false">关闭</el-button>
      <el-button type="primary" @click="submit" v-if="activeTab=='a' && isEdit">更新</el-button>
    </div>
    <div class="closeBtn" @click="showDetails=false">
      <i class="el-icon-close"></i>
    </div>
  </el-dialog>
</template>
<script>
  import * as FollowUpAPI from '@/Api/followup';
  import * as UserAPI from '@/Api/user'
  import * as Utils from '@/utils'
  import * as TeleAPI from '@/Api/telesys'
  export default {
    name: 'CompFollowUpDetails',
    data () {
      var checkAssigner = (rule, value, callback) => {
        if (this.upLoadRowData.form.resvTimeStr && !value) {
          callback(new Error('分配给字段不能为空'));
        } else {
          callback();
        }
      };
      return {
        activeTab: 'a',
        pagination: Utils.commonPagination(),
        pickerOptions:{
          disabledDate(time) {
            return time.getTime() <= Date.now()-24*60*60*1000;
          },
        },
        upLoadRowData: {
          form: {},
          rules: {
            theme: [
              {required: true, trigger: 'blur', message: '内容不能为空'},
              {max: 30, trigger: 'blur', message: '长度不能大于30个字符'}
            ],
            themeDesc: [
              {max: 200, trigger: 'blur', message: '长度不能大于200个字符'}
            ],
            type: [
              {required: true, trigger: 'blur', message: '请选择'},
            ],
            typeId: [
              {required: true, trigger: 'blur', message: '内容不能为空'}
            ],
            hstatus: [
              {required: true, trigger: 'blur', message: '处理状态不能为空'},
            ],
            assigner: [
              { validator: checkAssigner, trigger: 'blur',message: '分配给字段不能为空'}
            ],
          }
        },
        copyForm: null,
        showLabel: [],
        userList: [],
        dataList: [],
        showDetails: false,
        addRowData: {
          show: false,
          form: {
            followDetail: '',
            followDetailDesc: '',
          },
          rules: {
            followDetail: [
              {required: true, trigger: 'blur', message: '内容不能为空'},
            ]
          }
        },
        isChannelShow: false,
        phoneNum: '13511112222',
        teleChannel: '2',
        userInfo: {}
      }
    },
    props: {
      rowDetails: {
        type: Object,
        default: function () {
          return {}
        }
      },
      show: {
        type: Boolean,
        default: false,
      },
      from:{

      }
    },
    computed: {
      isEdit(){
        if(this.rowDetails.editType && this.rowDetails.editType == 'edit') {
          return true;
        } else {
          return false;
        }
      }
    },
    watch: {
      'show'(val){
        this.showDetails = val;
      },
      'upLoadRowData.form.resvTimeStr'(val) {
        if(!val) {
          this.upLoadRowData.form.during = '';
        }
      }
    },
    methods: {
      getRowData() {
        FollowUpAPI.followInfo({id: this.rowDetails.id})
          .then(res => {
            if (res.code != 0) {
              this.$notify.warning({
                title: '温馨提示',
                message: res.msg
              })
              return;
            }
            this.copyForm = Object.assign({}, res.data);
            this.upLoadRowData.form = res.data;
            if (res.data.labels && res.data.labels.length > 0) {
              let _arr = [];
              res.data.labels.split(',').forEach(item => {
                _arr.push(item.split('|')[1]);
              })
              this.showLabel = _arr;
            } else {
              this.showLabel = [];
            }
          })
          .catch(error => {
            console.log(error)
          })
      },
      remoteUserMethod(queryStr) {
        if (queryStr != '') {
          UserAPI.userNickname({
            input: queryStr
          })
            .then(res => {
              if (res.code != '0') {
                this.$notify({
                  title: '温馨提示',
                  message: res.msg,
                  type: 'warn'
                })
                return;
              }
              this.userList = res.data;
            })
            .catch(error => {
              console.log(error)
            })
        }

      },
      handleSizeChange(size) {
        this.pagination.pageSize = size;
        if (this.pagination.pageNo == 1) {
          this.getFollowDetail();
        } else {
          this.pagination.pageNo = 1;
        }
      },
      handleCurrentChange(index) {
        this.pagination.pageNo = index;
        this.getFollowDetail();

      },
      getFollowDetail() {
        FollowUpAPI.followDetailInfo({
          id: this.rowDetails.id,
          pageSize: this.pagination.pageSize,
          pageNo: this.pagination.pageNo,
        })
          .then(res => {
            if (res.code != 0) {
              this.$notify.warning({
                title: '温馨提示',
                message: res.msg
              })
              return;
            }
            this.pagination.total = res.data.totalElements;
            this.dataList = res.data.content;
          })
          .catch(error => {
            console.log(error)
          })
      },
      submit(){
        this.$refs.refUpLoadRowDataForm.validate(flg => {
          if (!flg) {
            return;
          }
          FollowUpAPI[this.from=='desktop'?'ifollowEdit':'followEdit'](Object.assign(Utils.updateFormItemCopy(this.copyForm), this.upLoadRowData.form))
            .then(res => {
              if (res.code != 0) {
                this.$notify.warning({
                  title: '温馨提示',
                  message: res.msg
                })
                return;
              }
              this.$message({
                message: '修改成功',
                type: 'success'
              });
              this.getRowData();
              this.$emit('submit')
            })
            .catch(error => {
              console.log(error)
            })
        })
      },
      addRowDataSubmit() {
        this.$refs.refddRowDataForm.validate(flg => {
          if (!flg) {
            return;
          }
          FollowUpAPI.followDetailEdit(Object.assign(this.addRowData.form, {
            id: this.rowDetails.id
          }))
            .then(res => {
              if (res.code != 0) {
                this.$notify.warning({
                  title: '温馨提示',
                  message: res.msg
                })
                return;
              }
              this.addRowData.show = false;
              this.getFollowDetail();
            })
            .catch(error => {
              console.log(error)
            })
        })
      },
      clearAddDialog(){
        this.$refs.refddRowDataForm.resetFields();
      },
      getInfo() {
        this.activeTab = 'a';
        this.pagination = Utils.commonPagination();
        this.getRowData();
        this.getFollowDetail();
      },
      getBaseParams () {
            if(this.$store.state.app.userInfo){
                let params = ["callerId", "customer", "followId", "csNo", "csName"];
                params.map( para => (this.userInfo[para] = this.$store.state.app.userInfo[para]));
            }
      },
      getCallChannels () { //拨号-获取线路列表
        this.isChannelShow = true;
        TeleAPI.getChannel()
            .then( res => {
                if(res.code != 0){
                    this.$message({
                        showClose: true,
                        message: res.msg,
                        type: 'error'
                    });
                    return;
                }
                this.isChannelShow = true;
            });
      },
      callIpPhone () {//拨打ip电话

            TeleAPI.callPhone(Object.assign(this.userInfo, {"context": this.teleChannel}))
                .then( res => {
                    if(res.code != 0){
                        this.$message({
                            showClose: true,
                            message: res.msg,
                            type: 'error'
                        });
                        return;
                    }
                    
            });
      }
    },
    mounted () {
        this.getBaseParams();//获取基本信息
    }
  }
</script>
<style scoped lang="scss">
  .m-leadTabFrom,.m-LeadTabTable {
    padding: 0 48px;
    width: 100%;
  }
  .closeBtn {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    width: 30px;
    height: 40px;
    font-size: 18px;
    line-height: 40px;
    text-align: center;
  }
</style>
